title = "促销产品"
url = "/sale.html"
layout = 'default'
==
<link rel="stylesheet" type="text/css" href="{{ 'assets/special/css/special.css'|theme }}">
<div class="category_content">
    <!-- breadcrumbs -->
    {% partial 'common/breadCrumb' category=category %}
    <!-- breadcrumbs end -->
    <div class="categoryCont">
        <div class="container">
            {% partial 'catalog/category-sidebar' %}
            <div class="fr rightBox pr">
                <div class="catg_rightBoxTop boxSizing">
                    <div class="fl">
                        <button class="fiveShow" dataClass="fiveShow"><i class="fa fa-th"></i></button>
                        <button class="threeShow active" dataClass="threeShow"><i class="fa fa-th-large"></i></button>
                    </div>

                </div>
                <div class="saleMune_">
                    <ul>
                        <li class="lis"><a href="javascript:;" data="saleHead1">売れ筋ランキング</a></li>
                        <li class="lis"><a href="javascript:;" data="saleHead2">超目玉特集</a></li>
                        <li class="lis"><a href="javascript:;" data="saleHead3">人気アイテム</a></li>
                    </ul>
                </div>
                <div class="catg_productBox">
                    {% set products = catalog.productSection('sale-pro1').items %}
                        <h3 class="saleHead" id="saleHead1">売れ筋ランキング</h3>
                        <ul class="catg_product saleCont_">
                            {% for product in products %}
                                <li class="catgItem">
                                    {% if loop.index >3 %}
                                        <span class="saleNo">{{ loop.index }}</span>
                                    {% endif %}
                                    <a href="{{ product.url }}">
                                        <div class="catgItem_image">
                                            <img  class="lazy" data-original="{{ product.f_thumb }}" alt="{{ product.name }}" width="100%">
                                        </div>
                                        <div class="catgItem_data">
                                            <p class="omit">{{ product.price|formatPrice }}</p>
                                        </div>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% set products = catalog.productSection('sale-pro2').items %}
                    <h3 class="saleHead" id="saleHead2">超目玉特集</h3>
                    <ul class="catg_product">
                        {% for product in products %}
                            <li class="catgItem">
                                <a href="{{ product.url }}">
                                    <div class="catgItem_image">
                                        <img  class="lazy" data-original="{{ product.f_thumb }}" alt="{{ product.name }}" width="100%">
                                    </div>
                                    <div class="catgItem_data">
                                        <p class="omit">{{ product.price|formatPrice }}</p>
                                    </div>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                    {% set products = catalog.productSection('sale-pro3').items %}
                    <h3 class="saleHead" id="saleHead3">人気アイテム</h3>
                    <ul class="catg_product saleCont_">
                        {% for product in products %}
                            <li class="catgItem">
                                {% if loop.index >3 %}
                                    <span class="saleNo">{{ loop.index }}</span>
                                {% endif %}
                                <a href="{{ product.url }}">
                                    <div class="catgItem_image">
                                        <img  class="lazy" data-original="{{ product.f_thumb }}" alt="{{ product.name }}" width="100%">
                                    </div>
                                    <div class="catgItem_data">
                                        <p class="omit">{{ product.price|formatPrice }}</p>
                                    </div>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>

{% put scripts %}
<script>
    var AllHet = $(window).height();
    $('.saleMune_ ul .lis').click(function(){
        var ind = $('.saleMune_ ul .lis').index(this);
        var topVal = $('.catg_productBox .saleHead').eq(ind).offset().top -98;
        $('body,html').animate({scrollTop:topVal},200)
    })
   $(window).scroll(scrolls)
   scrolls()
   function scrolls(){
        var arr = new Array(3)
        var fixRight = $('.saleMune_ ul .lis');
        var sTop = $(window).scrollTop();

        for(var i=0;i<arr.length;i++){
          arr[i] = $('.catg_productBox .saleHead').eq(i).offset().top-100;
          if(sTop > arr[i]){
            fixRight.eq(i).addClass('active').siblings().removeClass('active');
          }
        }
    }
</script>
{% endput %}